<template>
  <view class="container">
    <!-- 顶部导航栏调整 -->
	 <view class="custom-nav" :style="{ paddingTop: statusBarHeight + 'px' }">
	   <view class="nav-content">
		 <view class="left-area" @click="goBack">
		   <text class="iconfont icon-more trasnicon" ></text>
		   <text class="nav-title">系统公告</text>
		 </view>
	   </view>
	 </view>
	 <view class="" :style="{ paddingTop: navHeight + 'px' }"></view>

    <!-- 搜索框调整 -->
    <view class="search-div">
		<view class="search-box">
		  <text class="iconfont icon-sousuo"></text>
		  <input type="text"  placeholder-class="search-placeholder" />
		</view>
	</view>
	<!-- 菜单导航 -->
	<view class="menu-nav">
	   <view class="nav" ref="nav" :style="navList.length <= 3 ? 'flex-direction: row' : ''">
	     <view 
	       class="list" 
	       v-for="(item, index) in navList" 
	       :key="item.id"
	       @click="onTab(item)"
	       :class="{'active': selectedItem && selectedItem.id === item.id}">
	       <text>{{ item.name }}</text>
	     </view>
	   </view>
	 </view>
	
    <!-- 公告列表调整 -->
    <scroll-view class="notice-list" scroll-y>
      <view v-if="selectedTab === 'platformNotifications'" class="notice-item" v-for="(item, index) in noticeList" :key="index" @click="gotoDetails(item)">
        <view class="notice-header">
          <image class="avatar" :src="item.avatar" mode="aspectFill"></image>
          <text class="name">{{item.name}}</text>
          <text class="time">{{item.time}}分钟前</text>
        </view>
        
		<view class="notice-text-box">
			<text class="iconfont icon-yidu" v-if="isRead"></text>
			<text class="iconfont icon-weidu" v-else></text>
			<text class="notice-text">{{item.text}}</text>
			
		</view>
        <view class="dispose">
        	<view class="">
        		
        	</view>
			<view class="">
				<text>立即处理</text>
				<text class="iconfont icon-more"></text>
			</view>
        </view>
      </view>
    </scroll-view>

    <!-- 底部导航栏调整 -->
    <!-- <view class="tab-bar">
      <view class="tab-item">
        <image src="/static/home.png" mode="aspectFit"></image>
      </view>
      <view class="tab-item active">
        <image src="/static/message-active.png" mode="aspectFit"></image>
      </view>
      <view class="tab-item">
        <image src="/static/user.png" mode="aspectFit"></image>
      </view>
    </view> -->
  </view>
</template>

<script>
export default {
  data() {
    return {
		isRead:true,
      statusBarHeight: 0,
      navHeight: 0,
	  selectedItem: null,
	  selectedTab: 'platformNotifications', 
	  level:'',
	  navList: [
	    { id: 1, name: '顾客消息', tabName: 'customerNews' },
	    { id: 2, name: '平台消息', tabName: 'platformMessages' },
	    { id: 3, name: '平台通知', tabName: 'platformNotifications' },
	  ],
      noticeList: [
        {
          avatar: '/static/logo.png',
          name: '另品网',
          time: '3',
          image: '/static/img/banner_01.png',
          text: '这是一条系统公告'
        },
		{
		  avatar: '/static/logo.png',
		  name: '另品网',
		  time: '3',
		  image: '/static/img/banner_01.png',
		  text: '这是一条系统公告'
		}
      ]
    }
  },
  mounted() {
    this.selectedItem = this.navList[0]; 
    
  },
  onLoad() {
    const systemInfo = uni.getSystemInfoSync()
    this.statusBarHeight = systemInfo.statusBarHeight
    this.navHeight = systemInfo.statusBarHeight + 44
	
  },
 onShow() {
     const userInfo = uni.getStorageSync('_UserInfo');
     this.level = userInfo.level;
     console.log('level', this.level);
 
     // 根据level判断是否需要隐藏“顾客消息”
     if (this.level === 0) {
       // 使用filter过滤掉level为1时的“顾客消息”
       this.navList = this.navList.filter(item => item.tabName !== 'customerNews');
     }
   },
  methods: {
	  goBack(){
		  uni.navigateBack(-1)
	  },
	  onTab(item) {
	       this.selectedItem = item;
	       this.selectedTab = item.tabName; // 根据 tabName 切换显示的内容
	     },
	  gotoDetails(data){
		uni.navigateTo({
			url: '/moduleA/notice/details'
		})  
	  },
    goBack() {
      uni.navigateBack()
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background-color: #f7f8fa;
  // padding-bottom: 50px;
}
// 菜单导航
	.menu-nav {
		padding:0 14rpx ;
	  width: 100%;
	  text-align: center;
	  padding: 0 14.83rpx;
	
	  .nav {
	    display: flex;
	    justify-content: center; /* 确保导航项在水平方向居中 */
	    flex-wrap: wrap; /* 使得导航项在屏幕较小时能换行 */
	  }
	
	  .list {
	    flex: 0 0 33.3%;
	    cursor: pointer;
	    padding: 15.7rpx 0;
	    display: flex;
	    justify-content: center; /* 水平居中 */
	    align-items: center; /* 垂直居中 */
	  }
	
	  .list text {
	    font-size: 20rpx;
	    color: #000000;
	    text-align: center;
	  }
	
	  .list.active {
	    display: flex;
	    padding: 15.7rpx 0;
	    align-items: center;
	    justify-content: center; /* 水平居中 */
	    border-bottom: 3.49rpx solid #43d534;
	  }
	
	  .list.active text {
	    font-size: 20rpx;
	    color: #000000;
	  }
	}
	
.custom-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
	background: url('../../static/background.jpg');    .trasnicon{
  	transform: rotate(180deg);
    }
  	
  	//菜单
    .nav-content {
		height: 44px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 12px;
		background: transparent;
		
		.left-area {
		  display: flex;
		  align-items: center;
		  
		  .iconfont {
			font-size: 16px;
			color: #333;
			margin-right: 8px;
		  }
		  
		  .nav-title {
			font-size: 16px;
			color: #333;
			font-weight: 500;
		  }
		}
  	
  	
    }
  }
  .search-div{
	  height: 100rpx;
	  background-color: #f3f3f3;
	  position: relative;
  }
.search-box {
  // margin: calc(var(--status-bar-height) + 44px) 12px 10px;
  position: absolute;
  width: 96%;
  left:2%;
  top: 30rpx;
  height: 60rpx;
  background-color: #fff;
  border-radius: 18px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  border: 1rpx solid #8AE9CD;

  .search-icon {
    width: 30rpx;
    height: 30rpx;
	// background-color: #ccc;
    // background: url('/static/search.png') no-repeat center/contain;
  }

  input {
    flex: 1;
    margin-left: 8px;
    font-size: 14px;
  }

  .search-placeholder {
    color: #bbb;
  }
}
//通知内容
.notice-list {
	background-color: #f3f3f3;
  .notice-item {
	  padding: 20rpx;
	  width: 94%;
	  margin: 10rpx auto;

    background: #ffffff;
    border-radius: 12rpx;
    box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.16); 

    .notice-header {
      display: flex;
      align-items: center;
      margin-bottom: 18rpx;
		
      .avatar {
        width: 20px;
        height: 20px;
        border-radius: 4px;
      }

      .name {
        font-size: 12px;
        font-weight: 500;
        text-align: left;
        color: #43d534;
        margin-left: 8px;
        flex: 1;
      }

      .time {
        font-size: 12px;
        font-family: Microsoft JhengHei UI, Microsoft JhengHei UI-Bold;
        font-weight: 700;
        text-align: left;
        color: #afafaf;
      }
    }

    
	.notice-text-box{
		margin-top: 14rpx;
		 line-height: 36.63rpx;
		.notice-text {
			font-size: 20.93rpx;
			font-family: Yu Gothic UI, Yu Gothic UI-Regular;
			font-weight: 400;
			text-align: center;
			color: #000000;
		
		}
		.iconfont{
			align-items: center;
			
		 }
	}
    
	.dispose{
		display: flex;
		justify-content: space-between;
		text{
			line-height:27.91rpx ;
			height: 27.91rpx;
			font-size: 20.93rpx;
			font-family: Segoe UI, Segoe UI-Semibold;
			font-weight: 600;
			text-align: right;
			color: #43d534;
		}
	}
  }
}

.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
  background-color: #fff;
  display: flex;
  align-items: center;
  box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.04);

  .tab-item {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    
    image {
      width: 24px;
      height: 24px;
    }

    &.active {
      image {
        width: 26px;
        height: 26px;
      }
    }
  }
}
</style> 